<link href="styles/datepicker3.css" rel="stylesheet">
<link href="styles/styles.css" rel="stylesheet">
<style type="text/css">
    .alert {
        padding: 0px;
    }
    .exerciseClass input{
        width:80px;
    }
    .myNumber{
        display:-moz-inline-box;
        display:inline-block;
        /*width:20px;*/
    }
    .exerciseClass {
        font-size: 120%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
        margin: 0;
    }
    ul.countdown {
        list-style: none;
        margin: 15px 0 0px 0;
        padding: 0;
        display: block;
        text-align: center;
    }
    ul.countdown li {
        display: inline-block;
    }
    ul.countdown li span {
        font-size: 50px;
        font-weight: 300;
        line-height: 50px;
    }
    ul.countdown li.seperator {
        font-size: 40px;
        line-height: 40px;
        vertical-align: top;
    }
    ul.countdown li p {
        color: #a7abb1;
        font-size: 14px;
    }
    .minutes_ref{
        margin: 0;
    }
</style>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"><span>用户操作页面</span></a>
            <ul class="user-menu">
                <li class="dropdown pull-right">
                    <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {{username}} <span class="caret"></span></a>
                </li>
            </ul>
        </div>
    </div><!-- /.container-fluid -->
</nav>

<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
    <ul class="nav menu">
        <li><a href="/arithmetic/MyApp/#/work/studentInformation/{{username}}"><span class="glyphicon glyphicon-dashboard"></span> 学生信息</a></li>
        <li><a href="/arithmetic/MyApp/#/work/arithmeticExerciseCopy/{{username}}"><span class="glyphicon glyphicon-list-alt"></span> 简单算术练习</a></li>
        <li><a href="/arithmetic/MyApp/#/work/arithmeticExercise2Copy/{{username}}"><span class="glyphicon glyphicon-pencil"></span> 混合运算练习</a></li>
        <li><a href="/arithmetic/MyApp/#/work/arithmeticExercise/{{username}}"><span class="glyphicon glyphicon-th"></span> 简单算术测试</a></li>
        <li><a href="/arithmetic/MyApp/#/work/arithmeticExercise2/{{username}}"><span class="glyphicon glyphicon-stats"></span> 混合运算测试</a></li>
    </ul>
</div><!--/.sidebar-->

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a ><span class="glyphicon glyphicon-home"></span></a></li>
            <li class="active">混合运算练习</li>
        </ol>
    </div><!--/.row-->

    <div class="row">
        <div class="col-lg-6">
            <h1 class="page-header">混合运算练习</h1>
        </div>
        <div class="col-lg-6">
            <ul class="countdown">
                <li> <span class="minutes">30</span>
                    <p class="minutes_ref">minutes</p>
                </li>
                <li class="seperator">:</li>
                <li> <span class="seconds">00</span>
                    <p class="seconds_ref">seconds</p>
                </li>
            </ul>
        </div>
    </div><!--/.row-->

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">混合四则运算</div>
                <div class="panel-body ">
                    <form role="form" ng-submit="submitExerciseResult()">
                        <div  class="col-md-6 exerciseClass" ng-repeat="exercise in exercises">
                           <span class="myNumber">  {{exercise[0]}}  =  </span>
                            <input type="number" value="" id="exerciseAnswer{{$index}}"  ng-model="exercise[2]" required>
							<span id="exerciseResult{{$index}}"></span>
                        </div>
                        <div  class="col-md-3"></div>
                        <div  class="col-md-4"><button id="btnSubmit" class="btn btn-primary">提交答案</button>
                            &nbsp; &nbsp;
                         <button id="refresh" class="btn btn-primary"
                                    ng-click="refresh()">刷新页面</button>
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.col-->
    </div><!-- /.row -->


</div>	<!--/.main-->
